<script setup lang="ts">
import ComponentPanel from "../ComponentPanel/index.vue";
import SettingPanel from "../SettingPanel/index.vue";
import { ref, reactive } from "vue";
import { v4 as uuid } from "uuid";
import { IFormItem } from "../Form";
import Form from "../../components/Form/index.vue";

const activeName = ref("form");
const formSetting = reactive({
  type: "form",
  size: "default",
  labelPosition: "left",
  labelAlgn: "left",
  formInline: true,
  hiddenAction: false,
  onSubmit: "",
});
const componentMdoel = reactive({});
const formModel = reactive({});
const formItems = ref<Array<IFormItem>>([]);
const importDialogVisible = ref(false);
const exportDialogVisible = ref(false);
const previewDialogVisible = ref(false);
const importJsonContent = ref("");
const exportJsonContent = ref("");
let dragElement = {};
const handledrag = (item) => {
  dragElement = item;
};
const allowDrop = (e) => {
  e.preventDefault();
};
const drop = (e) => {
  const num =
    formItems.value.filter((x) => x.type === dragElement.type).length + 1;
  const vmdel = dragElement.type + num;
  const label = dragElement.label + num;
  const obj = {
    id: uuid(),
    ...dragElement,
    labelWidth: "80px",
    vModel: vmdel,
    prop: vmdel,
    label,
    value:'',
    placeholder: label,
  };
  const obj1 = { ...obj };
  formItems.value.push(obj1);

  for (const key in obj1) {
    if (Object.prototype.hasOwnProperty.call(obj1, key)) {
      const element = obj1[key];
      componentMdoel[key] = element;
    }
  }
  activeName.value = "component";
};

const handleSelect = (item) => {
  if (item) {
    activeName.value = "component";
    for (const key in item) {
      if (Object.prototype.hasOwnProperty.call(item, key)) {
        const element = item[key];
        componentMdoel[key] = element;
      }
    }
  }
};
const handleChange = (item) => {
  debugger;
  const { componentModel, setting } = item;
  for (const key in setting) {
    if (Object.prototype.hasOwnProperty.call(setting, key)) {
      const element = setting[key];
      formSetting[key] = element;
    }
  }

  const index = formItems.value.findIndex((x) => x.id === componentModel.id);
  if (index !== -1) {
    let obj = { ...componentModel };
    if (componentModel.options) {
      obj = { ...obj, options: JSON.parse(componentModel.options) };
    }
    formItems.value[index] = { ...obj};
    for (const key in formModel) {
      if (Object.prototype.hasOwnProperty.call(formModel, key)) {
        delete formModel[key]
      }
    }
    formModel[obj.vModel] = obj.value;
  }
};
const prview = () => {
  previewDialogVisible.value = true;
};
const reset = () => {
  formItems.value = [];
};
const importJson = () => {
  importDialogVisible.value = true;
};
const exportJson = () => {
  exportDialogVisible.value = true;
  const ss={
    setting:formSetting,
    model:formModel,
    formItems:formItems.value
  }
  exportJsonContent.value = JSON.stringify(ss, null, 8);
};
const handleOk = () => {
  const valueStr = importJsonContent.value;
  const value = JSON.parse(valueStr);
  formItems.value = value;
  importDialogVisible.value = false;
};
const handleSubmit=(val)=>{
  const onSubmitFunction = new Function('val',formSetting.onSubmit);
  onSubmitFunction()
}
</script>
<template>
  <el-row class="form-head">
    <el-col class="logo">
      <img
        style="vertical-align: middle"
        width="20"
        height="20"
        src="../../assets/vue.svg"
      />
      <span class="logo-title">quick-vue3-form</span>
      <span class="logo-description">表单设计器</span>
    </el-col>
    <el-col></el-col>
    <el-col></el-col>
  </el-row>
  <el-row class="form-design-row">
    <el-col :span="5">
      <component-panel @drag="handledrag"></component-panel>
    </el-col>
    <el-col :span="14">
      <div class="toolbar">
        <el-button type="primary" @click="prview">预览</el-button>
        <el-button type="success" @click="reset">重置</el-button>
        <el-button type="info" @click="importJson">导入JSON</el-button>
        <el-button type="warning" @click="exportJson">导出JSON</el-button>
        <!-- <el-button type="danger" @click="exportJson">生成代码</el-button> -->
      </div>
      <div class="form-design" @drop="drop" @dragover="allowDrop">
        <Form
          type="form"
          :is-design="true"
          :label-position="formSetting.labelPosition"
          :select-item="componentMdoel"
          :model="formModel"
          :items="formItems"
          @on-select="handleSelect"
          @on-submit="handleSubmit"
        >
        </Form>
      </div>
    </el-col>
    <el-col :span="5">
      <setting-panel
        :active-name="activeName"
        :componentMdoel="componentMdoel"
        @change="handleChange"
      ></setting-panel>
    </el-col>
  </el-row>
  <el-dialog v-model="importDialogVisible" title="导入JSON" width="30%">
    <div class="title">
      JSON格式如下，直接复制生成的json覆盖此处代码点击确定即可
    </div>
    <div>
      <el-input
        v-model="importJsonContent"
        :rows="20"
        type="textarea"
        placeholder="Please input"
      />
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="importDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleOk"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog v-model="exportDialogVisible" title="导出JSON" width="30%">
    <div class="title">
      JSON格式如下，直接复制生成的json覆盖代码的配置项即可
    </div>
    <div>
      <el-input
        v-model="exportJsonContent"
        :rows="20"
        type="textarea"
        placeholder="Please input"
      />
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="exportDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleJsonCopy"> 复制 </el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog v-model="previewDialogVisible" title="预览" width="60%">
    <Form
      type="form"
      :model="componentMdoel"
      :items="formItems"
      :hidden-ction="true"
    ></Form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="previewDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleOk"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<style>
.form-head {
  height: 40px;
}
.logo {
}
.logo-title {
  padding: 10px;
}
.logo-description {
  font-size: 22px;
}
.form-design-form {
  border: 1px solid #dcdfe6;
}
.form-design {
  height: 550px;
  /* background-color: #fff;  */
  border: 1px solid #dcdfe6;
  /* margin:10px; */
  overflow-y: auto;
}
.form-design-item {
  margin: 10px;
  padding: 10px;
}
.toolbar {
  border: 1px solid #dcdfe6;
  border-bottom: none;
  padding: 7px;
  text-align: right;
}
.active {
  border: 3px solid #409eff;
}
</style>
